<template>
  <div>

    <div class="iview-each-menu">

      <ul>
        <li v-for="menuList in ecchMapList.menuList" :class="menuList.className?menuList.className:''"
            v-if="menuList.ismenu" @click="allEvnet(menuList,menuList.code)">
          <theme-switch v-if="menuList.className=='themeBtn'" class="theme-componet" v-show="showTheme"></theme-switch>
          <div placement="top" class="toolBox">
            <i class="icon iconfont iview-color-theme" :class="menuList.icon"></i>
            <div slot="content">
              <p>{{menuList.name}}</p>
            </div>
          </div>
          <div v-if="menuList.children" v-show="menuList.model" class="iview-divmodel" ref="box" @click.stop>
              <span v-for="item in menuList.children" @click="allEvnet(menuList.children,item.code)">
                <i class="icon iconfont iview-color-theme" :class="item.icon"></i>
                <p>{{item.name}}</p>
              </span>
          </div>
        </li>
      </ul>
    </div>
    <!--定位弹出框-->
    <datal-modle ref="locationModal" title="定位" name="location" number="330" class="iview-location" :draggable="searchDrag" :className="ivewSearch">
      <data-location ref="location"></data-location>
    </datal-modle>
    <!--搜索框的弹出框-->
    <datal-modle ref="searchModal" title="搜索" name="tree" number="330" class="iview-search" :draggable="searchDrag" :className="ivewSearch">
      <Search ref="layerSearch" :mapId="mapId"></Search>
    </datal-modle>
    <datal-modle ref="datailContent" title="图层控制" name="layercontrol" number="330"  :draggable="searchDrag" :className="ivewSearch" >
      <layercontrol-model :mapId="mapId"></layercontrol-model>
    </datal-modle>
    <!--两图对比-->
    <!--   <Modal
        v-model="twoPicModal" footer-hide width="100%"  fullscreen class="iview-full-model" @on-cancel="cancel">
        <several-maptwo></several-maptwo>
      </Modal>

      <Modal
        v-model="fourPicModal" footer-hide width="100%"  fullscreen class="iview-full-model" @on-cancel="cancel">
        <several-mapfour :mapId="mapId"></several-mapfour>
      </Modal> -->
    <!--数据加载-->
    <datal-modle ref="loaderModal" title="数据加载" number="330" class="iview-loaderD" :draggable="searchDrag">
      <data-loader></data-loader>
    </datal-modle>
    <!--出图-->
    <output-map ref="outputModal" number="340" colorTheme="iview-blue-dark" class="iview-outputM" :draggable="searchDrag">
    </output-map>
  </div>


</template>
<script>
import $ from "jquery";
import Search from "./Search";
// import Search2 from './sourceIndex';
import themeSwitch from './theme-switch';
import Measure from "../JavaScript/Measure";

import datalModle from "../public/modle.vue";
import layercontrolModel from "./layercontrolModel";
/*   import severalMaptwo from './severalMaptwo';
  import severalMapfour from './severalMapfour'; */
import DataLoader from "./dataLoader";
import dataLocation from "./dataLocation";
import outputMap from "./outputMap";
import Bus from "./Bus";
import Global from "./Global";

export default {
  components: {
    DataLoader,
    Search,
    datalModle,
    layercontrolModel,
    //severalMaptwo,
    // severalMapfour,
    outputMap,
    dataLocation,
    themeSwitch
  },
  props: {
    mapId: {
      type: String,
      default: "mainMap"
    },
    ecchMapList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      searchModal: false,
      datailContent: false,
      twoPicModal: false,
      fourPicModal: false,
      boxToggle: false,
      MeasuringBox: false,
      box: {},
      locationModal: false,
      searchDrag: false,
      showTheme:false,
      fullScreenState:false
    };
  },
  watch: {
    mapId(curVal, oldVal) {
      console.log(curVal, oldVal);
    }
  },
  computed: {
    ivewSearch: function() {
      var curVal = this.mapId;
      var searchClass;
      if (curVal == "mainMap") {
        searchClass = "mainSearch";
        this.searchDrag = true;
      } else if (curVal == "towMap") {
        searchClass = "twoSearch";
        this.searchDrag = false;
      } else if (curVal == "treeMap") {
        searchClass = "threeSearch";
        this.searchDrag = false;
      } else {
        searchClass = "elseSearch";
        this.searchDrag = false;
      }
      return searchClass;
    }
  },
  methods: {
    allEvnet: function(event, code) {
      var self = this;
      switch (code) {
        case "position":
          self.locationFunction();
          break;
        case "search":
          self.searchFunction();
          break;
        case "layer":
          self.datailFunction();
          break;
        case "addLayers":
          self.compareLoader();
          break;
        case "measure":
          self.measureFunction(event);
          break;
        case "clearGraphic":
          self.clearGraphics();
          break;
        case "clearLayer":
          self.clearLayers();
          break;
        case "full":
        if (self.isFullScreen()) {
                // exitFullScreen();
                self.exitFullscreen();
                //self.fullScreenState = false;
            }
            else {
                 self.fullScreen();
               // self.fullScreenState = true;
            }
         
          break;
        case "help":
          self.showHelp();
          break;
        case "mapPrint":
          self.output();
          break;
        case "compareMorePicture":
          self.compareMorePicture(event);
          break;
        case "measureLine":
          self.measureLine();
          break;
        case "measurePolygon":
          self.measurePolygon();
          break;
        case "twoPic":
          self.twoPic();
          break;
        case "fourPic":
          self.fourPic();
          break;
          case "theme":
          self.showTheme=!self.showTheme;
          break;
      }
    },
isFullScreen:function  () {
    return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
},
    fullScreen: function() {
      var element = document.documentElement;
      //IE 10及以下ActiveXObject
      if (window.ActiveXObject) {
        var WsShell = new ActiveXObject("WScript.Shell");
        WsShell.SendKeys("{F11}");
      }
      //HTML W3C 提议
      else if (element.requestFullScreen) {
        element.requestFullScreen();
      }
      //IE11
      else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
      // Webkit (works in Safari5.1 and Chrome 15)
      else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      }
      // Firefox (works in nightly)
      else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      }
    },
    exitFullscreen:function () {
    if (document.exitFullscreen) { document.exitFullscreen(); }
    else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
    else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
    else if (document.msExitFullscreen) { document.msExitFullscreen(); }
    else {
        alert("请使用ESC键退出")
    }
},
    cancel: function() {},
    output: function() {
      var m = this;
      m.$refs.outputModal.datailToggle = !m.$refs.outputModal.datailToggle;
    },
    compareLoader: function() {
      var m = this;
      m.$refs.loaderModal.datailToggle = !m.$refs.loaderModal.datailToggle;
    },
    locationFunction: function() {
      var m = this;
      m.$refs.locationModal.datailToggle = !m.$refs.locationModal.datailToggle;
    },
    searchFunction: function() {
      var m = this;
      m.$refs.searchModal.datailToggle = !m.$refs.searchModal.datailToggle;
    },
    datailFunction: function() {
      var m = this;
      m.$refs.datailContent.datailToggle = !m.$refs.datailContent.datailToggle;
    },
    compareMorePicture: function(evt) {
      evt.model = !evt.model;
    },
    twoPic: function() {
      var m = this;
      Bus.$emit("eachMapEvent", "two");
      /* m.twoPicModal = !m.twoPicModal;*/
    },
    fourPic: function() {
      var m = this;
      Bus.$emit("eachMapEvent", "four");
      /* m.fourPicModal = !m.fourPicModal;*/
    },
    measureFunction: function(evt) {
      evt.model = !evt.model;
    },
    measureLine: function() {
      Measure.initMeasure("POLYLINE", this.mapId);
    },
    measurePolygon: function() {
      Measure.initMeasure("POLYGON", this.mapId);
    },
    showHelp: function() {},
    clearGraphics: function() {
      //清除所有临时图层
      var map = Global.maps[this.mapId];
      if (map) {
        var layerIds = map.graphicsLayerIds;
        for (var i = 0; i < layerIds.length; i++) {
          map.removeLayer(map.getLayer(layerIds[i]));
        }
        map.graphics.clear();
      }
    },
    clearLayers: function() {
      //清除所有瓦片图层 并且树上选中的节点取消选中状态  历史数据中的选中状态也要取消
      var map = Global.maps[this.mapId];
      if (map) {
        var layerIds = map.layerIds,
          graphicLayerIds = map.graphicsLayerIds;
        //底图图层不能被移除 临时图层不能被移除
        for (var i = 0; i < layerIds.length; i++) {
          var flag = false;
          for (var y = 0; y < graphicLayerIds.length; y++) {
            if (layerIds[i] == graphicLayerIds[y]) {
              flag = true;
            }
          }
          if (
            !flag &&
            layerIds[i] != "vectormap" &&
            layerIds[i] != "imagemap"
          ) {
            map.removeLayer(map.getLayer(layerIds[i]));
          }
        }
        this.$refs.layerSearch.$refs.tree.setCheckedKeys([]);
        this.$refs.layerSearch.$refs.historyTable.selectAll(false);
      }
    }
  },
  created: function() {
    document.addEventListener("click", e => {
      var m = this;
      if (m.$refs.box) {
        console.log(this.$refs.box.contains(e.target));
        // m.boxToggle= m.$refs.box.contains(e.target)\
        m.boxToggle = false;

        //console.log(m.boxToggle)
        if (!this.$refs.box.contains(e.target)) {
          this.isShowDialog = false;
          m.boxToggle = m.$refs.box.contains(e.target);
          //console.log(m.boxToggle)
        }
      } else {
        console.log("未进入");
      }
    });
  },
     mounted:function() {
        
    if (this.mapId == "mainMap") {
      this.searchDrag = true;
    } else {
      this.searchDrag = false;
    }
  },
};
/* $(function () {
    $(".themeSwitch").hide();
    var flag = 0;
    $(".themeBtn").click(function () {
      if (flag) {
        $(".themeSwitch").hide();
        flag = 0;
      }
      else {
        $(".themeSwitch").show();
        flag = 1;
      }
    })
  }) */
</script>
<style>
.ivew-layerC {
  left: 50%;
}
.mainSearch {
  top: 0px;
}
.twoSearch {
  left: 50% !important;
}
.threeSearch {
  left: 5% !important;
  top: 50% !important;
}
.elseSearch {
  left: 50% !important;
  top: 50% !important;
}

  .iview-divmodel {
    position: absolute;
    top: -56px;
    display: flex;
    text-align: center;
    margin-left: -44px;
  }

  .iview-divmodel span {
    padding: 0 5px;
    background-color: rgba(255, 255, 255, 0.53);
    border: 1px solid rgb(215, 214, 216);
    margin: 0 2px;
  }

  .bottom_box .iview-divmodel span p {
    margin: 0px;
  }

.pop1 {
  z-index: 99;
}

  .pop2 {
    z-index: 9;
  }

  .bottom_box {
    z-index: 1000;
    border: 1px solid rgb(215, 214, 216);
    position: relative;
    /*bottom: 10px;*/
    width: 680px;
    left: calc((100% - 680px) / 2);
    display: block;
    background-color: rgba(255, 255, 255, 0.53);
  }

  /* .bottom_box table {
     height: 60px;
     padding-bottom: 10px;
     width: 678px;
     text-align: center;
     margin: auto;
     border-collapse: collapse;
     border-spacing: 0;
     color: #000000;
     font-size: 12px;
   }

   .bottom_box table tr td a {
     display: block;
     float: left;
     margin: 0 10px;
     margin-bottom: 6px;
   }

   .bottom_box table td a, .bottom_box table td a:hover {
     opacity: 1.0;
     filter: alpha(opacity=53);
   }

   .bottom_box table tr td p {
     margin: 5px 12px 0 0;
   }
   .positioning, .search, .layer_control, .Multiple_comp, .map_output, .measure, .dataload, .clr_icon, .clr_data, .full, .helper {
     width: 44px;
     height: 30px;
     opacity: 1.0;
     filter: alpha(opacity=100);
   } */

  .iview-each-menu > div {
    box-sizing: content-box;
  }

  .iview-each-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    position: relative;
    display: flex;
    /*bottom: 10px;*/
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 15px;
  }

  .iview-each-menu ul {
    display: flex;
    background-color: rgba(255, 255, 255, 0.5);
    border: solid 1px #cdcdcd;
  }

  .iview-each-menu ul li {
    margin: 0 8px;
    margin-top: 5px;
  }

  .iview-each-menu ul li：hover {
    color: #000066;
  }

  .iview-each-menu ul li:first-child {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  .iview-each-menu ul li:last-child {
    margin-right: 15px !important;
  }

  .iview-each-menu ul li:nth-child(11) {
    display: inline;
    padding-left: 15px !important;
  }

  .iview-each-menu ul li .toolBox i:hover,.iview-each-menu ul li .iview-divmodel i:hover {
    color: #ae0001 !important;
  }
  .theme-componet{
    position: absolute;
    bottom: 60px;
    display: block;
    text-align: center;
    margin-left: -28px;
    z-index: 30;
    background-color: rgba(255,255,255,0.53);
  }
.themeBtn ul{
   display: block !important;
  }
.ivu-dropdown-item{
  padding: 5px 0px !important;
}
  .themeBtn ul li i:hover {
  }
  .themeBtn ul li:first-child  {
    margin: 0 8px !important;
    margin-top: 5px !important;
  }
</style>
